<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<div class="page-content-wrap">

    <div class="row">
        <div class="col-md-12">

            <form class="form-horizontal" id="validate" role="form" action="${pageContext.request.contextPath}/admin/addMenus.jspa" method="post" enctype="multipart/form-data">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title"><strong>添加 菜品</strong> 信息</h3>
                    </div>
                    <div class="panel-footer">
                        <button class="btn btn-primary pull-right" id="bu" onclick="history.go(-1)">返回</button>
                    </div>
                    <div class="panel-body">

                        <div class="form-group">
                            <label class="col-md-3 col-xs-12 control-label">菜品名称</label>
                            <div class="col-md-6 col-xs-12">
                                <div class="input-group">
                                    <span class="input-group-addon"><span class="fa fa-pencil"></span></span>
                                    <input type="text" class="form-control" name="itemName" id = "input1"/>
                                </div>
                                <span id="s1" class="help-block" style="color:red"></span>
                                <span class="help-block">请不要使用特殊符号</span>
                            </div>
                        </div>
                        <script>
                            $(function(){

                                $("#validate").submit(function(){
                                    var i1 = $("#input1").val();
                                    var i2 = $("#input2").val();
                                    var i3 = $("#input3").val();
                                    var i4 = $("#input4").val();
                                    var i7 = $("#put").val();
                                    var i5 = $("#doc").val();
                                    if(i1==null || i1==""){
                                        $("#s1").html("菜品名称不能为空");
                                        return false;
                                    }
                                    if(i2==null || i2==""){
                                        $("#s2").html("菜品单位不能为空");
                                        return false;
                                    }
                                    if(i3==null || i3==""){
                                        $("#s3").html("菜品单价不能为空");
                                        return false;
                                    }
                                    if(i4==null || i4==""){
                                        $("#s4").html("菜品描述不能为空");
                                        return false;
                                    }
                                    if(i5==null || i5==""){
                                        $("#s5").html("至少上传一张图片");
                                        return false;

                                    }
                                    if(i7==null || i7==""){
                                        $("#ss").html("该属性不能为空");
                                        return false;
                                    }
                                    var i6 = $("#doc")[0].files[0].size;
                                    if(i6>1024*50){
                                        $("#s5").html("请上传规定尺寸的大小");
                                        return false;
                                    }
                                    return true;
                                });

                                //鼠标移出事件
                                $("#input1").mouseleave(function(){
                                    var i1 = $("#input1").val();
                                    if(i1!=null && i1!="") $("#s1").html("");
                                    else $("#s1").html("菜品名称不能为空");
//                                    else $("#s1").html("菜品名称不能为空");
                                });
                                $("#input2").mouseleave(function(){
                                    var i2 = $("#input2").val();
                                    if(i2!=null && i2!="") $("#s2").html("");
                                    else $("#s2").html("菜品单位不能为空");
//                                    else $("#s2").html("菜品单位不能为空");
                                });

                                $("#put").mouseleave(function(){
                                    var i2 = $("#put").val();
                                    if(i2!=null && i2!="") $("#s2").html("");
                                    else $("#ss").html("菜品库存不能为空");
//                                    else $("#s2").html("菜品单位不能为空");
                                });



                                $("#input3").mouseleave(function(){
                                    var i3 = $("#input3").val();
                                    if(i3!=null && i3!="") $("#s3").html("");
                                    else $("#s3").html("菜品单价不能为空");
                                });
                                $("#input4").mouseleave(function(){
                                    var i4 = $("#input4").val();
                                    if(i4!=null && i4!="") $("#s4").html("");
                                    else $("#s4").html("菜品描述不能为空");
                                });
                                $("#doc").mouseleave(function(){
                                    var i5 = $("#doc").val();
                                    if(i5!=null && i5!="") $("#s5").html("");
                                    else $("#s5").html("至少上传一张图片");
                                });

                            })

                        </script>

                        <div class="form-group">
                            <label class="col-md-3 col-xs-12 control-label">菜品单位</label>
                            <div class="col-md-6 col-xs-12">
                                <div class="input-group">
                                    <span class="input-group-addon"><span class="fa fa-pencil"></span></span>
                                    <input type="text" class="form-control" name="itemUnit" id="input2"/>
                                </div>
                                <span id="s2" class="help-block" style="color:red"></span>
                                <span class="help-block">大份 小份 盒装 斤装等属性</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 col-xs-12 control-label">设置库存</label>
                            <div class="col-md-6 col-xs-12">
                                <div class="input-group">
                                    <span class="input-group-addon"><span class="fa fa-pencil"></span></span>
                                    <input type="text" class="form-control" name="storeNum" id="put" value="0"/>
                                </div>
                                <span id="ss" class="help-block" style="color:red"></span>
                                <span class="help-block">该属性需为正整数 否则默认为零</span>
                            </div>
                        </div>
                        <div class="form-group">
                        <label class="col-md-3 col-xs-12 control-label">菜品单价</label>
                        <div class="col-md-6 col-xs-12">
                            <div class="input-group">
                                <span class="input-group-addon"><span class="fa fa-pencil"></span></span>
                                <input type="text" class="form-control" name="itemPrice" id="input3"/>
                            </div>
                            <span id="s3" class="help-block" style="color:red"></span>
                            <span class="help-block">价格最多保留两位小数</span>
                        </div>
                    </div>

                        <div class="form-group">
                            <label class="col-md-3 col-xs-12 control-label">菜品描述</label>
                            <div class="col-md-6 col-xs-12">
                                <textarea class="form-control" rows="5" name="itemDescription" id="input4"></textarea>
                                <span id="s4" class="help-block" style="color:red"></span>
                                <span class="help-block">菜品详细信息</span>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-md-3 col-xs-12 control-label">菜品类型</label>
                            <div class="col-md-6 col-xs-12">
                                <select class="form-control select" name="itemType">
                                    <c:forEach items="${menuService.findItemType()}" var = "root">
                                        <option value="${root}">${root}</option>
                                    </c:forEach>
                                </select>
                                <span class="help-block">必须选择一种菜品类型</span>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-md-3 col-xs-12 control-label">上传图片</label>
                            <div class="col-md-6 col-xs-12">
                                <input type="file" class="fileinput btn-primary" name="file" id="doc" title="Browse file" onchange="javascript:setImagePreview()"/>
                                <p><div id="localImag"><img id="preview" height="50px" src="/upload/${menus.imageFile}"/></div></p>
                                <span id="s5" class="help-block" style="color:red"></span>
                                <span class="help-block">请尽量上传200 * 200像素 大小小于50k的图片</span>
                            </div>
                        </div>

                    </div>
                    <div class="panel-footer">
                        <button class="btn btn-primary pull-right">提交</button>
                    </div>
                </div>
            </form>

        </div>
    </div>

</div>
<!-- END PAGE CONTENT WRAPPER -->
</div>
<!-- END PAGE CONTENT -->
</div>
<script type="text/javascript">
    function setImagePreview() {
        var docObj=document.getElementById("doc");
        var imgObjPreview=document.getElementById("preview");
        if(docObj.files && docObj.files[0]){
            //火狐下，直接设img属性
            imgObjPreview.style.display = 'block';
            imgObjPreview.style.width = '100px';
            imgObjPreview.style.height = '100px';
            //imgObjPreview.src = docObj.files[0].getAsDataURL();
            //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
            imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
        }else{
            //IE下，使用滤镜
            docObj.select();
            var imgSrc = document.selection.createRange().text;
            var localImagId = document.getElementById("localImag");
            //必须设置初始大小
            localImagId.style.width = "250px";
            localImagId.style.height = "200px";
            //图片异常的捕捉，防止用户修改后缀来伪造图片
            try{
                localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
            }catch(e){
                alert("您上传的图片格式不正确，请重新选择!");
                return false;
            }
            imgObjPreview.style.display = 'none';
            document.selection.empty();
        }
        return true;
    }
</script>